<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增进度计划信息')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<style>
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

</style>
<body>
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="dv">
    <form class="form-horizontal m" id="form-progress-add" AUTOCOMPLETE="OFF">
        <input name="companyId" type="hidden" id="companyId"/>
        <input name="programId" type="hidden" id="programId"/>


        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>楼栋号：</label>
                    <div class="col-sm-8">
                        <select id="buildingNumber" name="buildingNumber" class="form-control">
                            <option value="">请选择</option>
                            <option th:each="buildingNumber : ${buildingNumber}" th:text="${buildingNumber.name}" th:value="${buildingNumber.id}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red;">*</span>总楼层：</label>
                    <div class="col-sm-8">
                        <select id="floorNumber" name="floorNumber" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option th:each="floorNumber : ${floorNumber}" th:text="${floorNumber.dictValue}" th:value="${floorNumber.dictCode}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group" style="display: none" >
            <div class="col-sm-12">
                <div class="col-sm-6">
                <label class="col-sm-4 control-label"><span style="color: red; ">*</span>是否为关键线路:</label>
                <div class="col-sm-8">
                    <select id="isMainPath" name="isMainPath" class="form-control noselect2">
                        <option value="">请选择</option>
                        <option value="1">否</option>
                        <option value="0" selected>是</option>
                    </select>
                </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>批次:</label>
                    <div class="col-sm-8">
                        <select id="batch" name="batch" class="form-control noselect2">
                            <option value="">请选择</option>
                            <option value="0">第一批次</option>
                            <option value="1">第二批次</option>
                            <option value="2">第三批次</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>节点名称：</label>
                    <div class="col-sm-8">
                        <select id="node" name="node" class="form-control">
                            <option value="" class="sele">请选择</option>
                            <option th:each="node : ${node}" th:text="${node.dictValue}" th:value="${node.dictCode}"></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>计划开始时间：</label>
                    <div class="col-sm-8">
                        <input type="text" name="planStartTime" id="planStartTime" class="form-control" placeholder="yyyy-MM-dd" />
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>计划结束时间：</label>
                    <div class="col-sm-8">
                        <input type="text" name="planEndTime" id="planEndTime" class="form-control" placeholder="yyyy-MM-dd" />
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">备注：</label>
                    <div class="col-sm-8">
                        <textarea id="note" name="note" placeholder="如计划调整请备注" class="form-control"></textarea>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>

<script th:inline="javascript">
    var prefix = ctx + 'progressplan';
    var companyId = [[${companyId}]];
    var programId = [[${programId}]];
    $("#companyId").val(companyId);
    $("#programId").val(programId);
    $('#div1').show();
    $('#div2').hide();
    var buildingNumber ='';
    $("input[name$='planEndTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true,
        pickerPosition: 'bottom-right'
    });

    $("input[name$='planStartTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true,
        pickerPosition: 'bottom-right'
    });

    $("#buildingNumber").change(function(){
        buildingNumber = $("#buildingNumber").val();
        // 确定指定楼栋号对应的楼层数量
        $.ajax({
            url: prefix + '/selectFloorNumber?companyId='+companyId+'&proId='+programId+'&buildingNumber='+buildingNumber,
            success: function (data) {
                var numbers = $("#floorNumber").find("option"); //获取select下拉框的所有值
                if(data.floorNumber != undefined){
                    for (var j = 1; j < numbers.length; j++) {
                        if ($(numbers[j]).val() == data.floorNumber) {
                            $(numbers[j]).attr('selected',false);
                            $("#floorNumber").removeAttr("disabled");

                            $(numbers[j]).attr('selected','selected');
                            $("#floorNumber").attr('disabled','disabled');
                            break;
                        }
                    }
                }else{
                    $("#floorNumber").removeAttr("disabled");
                    $(numbers[0]).attr('selected','selected');
                }

                var batchNumbers = $("#batch").find("option"); //获取select下拉框的所有值
                if(data.batch != undefined){
                    for (var j = 1; j < batchNumbers.length; j++) {
                        if ($(batchNumbers[j]).val() == data.batch) {
                            $(batchNumbers[j]).attr('selected',false);
                            $("#batch").removeAttr("disabled");

                            $(batchNumbers[j]).attr('selected','selected');
                            $("#batch").attr('disabled','disabled');
                            break;
                        }
                    }
                }else{
                    $("#batch").removeAttr("disabled");
                    $(batchNumbers[0]).attr('selected','selected');
                }


            }




        })
        // 确定指定楼栋号对应的批次
        // $.ajax({
        //     url: prefix + '/selectFloorNumber?companyId='+companyId+'&proId='+programId+'&buildingNumber='+buildingNumber,
        //     success: function (data) {
        //         var numbers = $("#floorNumber").find("option"); //获取select下拉框的所有值
        //         if(data.floorNumber != undefined){
        //             for (var j = 1; j < numbers.length; j++) {
        //                 if ($(numbers[j]).val() == data.floorNumber) {
        //                     $(numbers[j]).attr('selected',false);
        //                     $("#floorNumber").removeAttr("disabled");
        //
        //                     $(numbers[j]).attr('selected','selected');
        //                     $("#floorNumber").attr('disabled','disabled');
        //                     break;
        //                 }
        //             }
        //         }else{
        //             $("#floorNumber").removeAttr("disabled");
        //             $(numbers[0]).attr('selected','selected');
        //         }
        //     }
        // })

    });

    function submitHandler() {
        // 非空检验
        if ($("#buildingNumber option:selected").val() == '') {
            $.modal.alertWarning("请选择楼栋号！");
            return;
        }
        if ($("#floorNumber option:selected").val() == '') {
            $.modal.alertWarning("请选择总楼层！");
            return;
        }
        if ($("#batch option:selected").val() == '') {
            $.modal.alertWarning("请楼栋批次！");
            return;
        }
        if ($("#node option:selected").val() == '') {
            $.modal.alertWarning("请楼栋节点！");
            return;
        }
        if ($("#planStartTime").val() == '') {
            $.modal.alertWarning("请选择计划开始时间！");
            return;
        }
        if ($("#planEndTime").val() == '') {
            $.modal.alertWarning("请选择计划完成时间！");
            return;
        }
        // 日期大小校验
        const _planEndTime = new Date($("#planEndTime").val())
        const _planStartTime = new Date($("#planStartTime").val())
        if(_planEndTime.getTime() < _planStartTime.getTime()){
            $.modal.alertWarning("开始时间不能大于结束时间!")
            return;
        }

        if ($.validate.form()) {
            $("#floorNumber").removeAttr("disabled");
            $("#isMainPath").removeAttr("disabled");
            $("#batch").removeAttr("disabled");
            var data = $("#form-progress-add").serializeArray();
            $.operate.save(prefix + "/save", data);

            $.modal.close();
            parent.refresh();
        }
    }


</script>

</body>
</html>